<!--
* @author wn
* @date 2024/03/20 10:46:11
* @description: 个人中心页面
!-->
<template>
	<view>
		<view
			class="op-cells"
			style="
				background-color: #ffffff;
				padding: 0 0 60rpx 0;
				overflow: hidden;
				text-align: center;
			"
		>
			<view style="margin-top: 40rpx">
				<view
					style="
						display: inline-block;
						width: 150rpx;
						height: 150rpx;
						border-radius: 200rpx;
						overflow: hidden;
					"
				>
					<block v-if="mine.avatar">
						<image
							:src="mine.avatar_url"
							style="width: 150rpx; height: 150rpx"
						/>
					</block>
					<block v-else>
						<image
							src="/static/images/avatar.jpg"
							style="width: 150rpx; height: 150rpx"
						/>
					</block>
				</view>
			</view>
			<view style="padding-top: 20rpx">
				<text class="user-nickname">{{
					mine.nickname ? mine.nickname : '用户' + mine._id
				}}</text>
			</view>
		</view>
		<view class="weui-cells op-cells" style="margin-top: 20rpx">
			<view class="weui-cell">
				<view class="weui-cell__bd">我的订单</view>
				<view class="weui-cell__ft">
					<text @tap="toOrders(0)" style="font-size: 26rpx">全部</text>
				</view>
			</view>
			<view class="weui-cell" style="padding: 0">
				<view class="weui-cell__bd">
					<view
						class="data-cell"
						hover-class="weui-cell_active"
						@tap="toOrders(1)"
					>
						<view class="data-icon"
							><image src="/static/images/od_10.png" mode="widthFix"
						/></view>
						<view class="data-txt">待支付</view>
						<text
							v-if="statistic.topays > 0"
							class="data-cell-hint data-cell-hint-red"
							>{{ statistic.topays }}</text
						>
					</view>
				</view>
				<view class="weui-cell__bd">
					<view
						class="data-cell"
						hover-class="weui-cell_active"
						@tap="toOrders(2)"
					>
						<view class="data-icon"
							><image src="/static/images/od_20.png" mode="widthFix"
						/></view>
						<view class="data-txt">待服务</view>
						<text
							v-if="statistic.todos > 0"
							class="data-cell-hint data-cell-hint-red"
							>{{ statistic.todos }}</text
						>
					</view>
				</view>
				<view class="weui-cell__bd">
					<view
						class="data-cell"
						hover-class="weui-cell_active"
						@tap="toOrders(3)"
					>
						<view class="data-icon"
							><image src="/static/images/od_30.png" mode="widthFix"
						/></view>
						<view class="data-txt">已完成</view>
					</view>
				</view>
				<view class="weui-cell__bd">
					<view
						class="data-cell"
						hover-class="weui-cell_active"
						@tap="toOrders(4)"
					>
						<view class="data-icon">
							<image src="/static/images/od_40.png" mode="widthFix" />
						</view>
						<view class="data-txt">已取消</view>
					</view>
				</view>
			</view>
		</view>
		<view class="weui-cells op-cells" style="margin-top: 20rpx">
			<view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
				<view class="weui-cell__hd">
					<image
						src="/static/images/ic_clients.png"
						style="
							display: block;
							margin-right: 20rpx;
							width: 20px;
							height: 20px;
						"
					></image>
				</view>
				<view class="weui-cell__bd">服务对象管理</view>
				<view class="weui-cell__ft weui-cell__ft_in-access"></view>
			</view>
			<view
				class="weui-cell weui-cell_access"
				hover-class="weui-cell_active"
				@tap="showShareModal"
			>
				<view class="weui-cell__hd">
					<image
						src="/static/images/ic_share.png"
						style="
							display: block;
							margin-right: 20rpx;
							width: 20px;
							height: 20px;
						"
					></image>
				</view>
				<view class="weui-cell__bd">分享转发</view>
				<view class="weui-cell__ft weui-cell__ft_in-access"></view>
			</view>
		</view>
		<share :shareModal="clone_shareModal"></share>
	</view>
</template>
<script setup>
import { getMemberInfoApi } from '@/api/member'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { filt } from '@/utils/filt'

onLoad(() => getUserInfo())

// 个人信息
const mine = ref({})
// 订单状态统计
const statistic = ref({})
// 获取用户信息接口
const getUserInfo = async () => {
	const { mine: m, statistic: s } = await getMemberInfoApi()
	mine.value = m
	statistic.value = s
}

const clone_shareModal = ref(false)
// 点击转发 列
const showShareModal = () => (clone_shareModal.value = true)

/**
 * 跳转到 订单页 switchTab - 路径后不能带参数
 * 1 pinia
 * 2 制定一个 ref 俩页面分别引入  watch 该 ref
 */
const toOrders = active => {
	filt.value = active // 触发 watch
	uni.switchTab({ url: '/pages/order/order' })
}
</script>
<style lang="scss">
.weui-cell {
	padding: 30rpx 40rpx;
}

.user-nickname {
	font-weight: bold;
	margin: 0 5rpx 0 50rpx;
	display: inline-block;
	padding-right: 40rpx;
	background: url()
		no-repeat right center;
	background-size: 30rpx;
}

.data-cells .weui-cell {
	padding: 0 !important;
}
.data-cell {
	text-align: center;
	padding: 30rpx 0;
	position: relative;
}
.data-val {
	font-size: 36rpx;
	font-weight: bold;
	height: 70rpx;
	line-height: 70rpx;
}
.data-icon image {
	width: 80rpx;
	height: 80rpx;
	line-height: 0;
}
.data-txt {
	font-size: 26rpx;
	color: #999999;
	height: 50rpx;
	line-height: 50rpx;
	margin-top: 10rpx;
}
.data-cell-hint {
	font-size: 20rpx;
	color: #ffffff;
	background: #353535;
	height: 30rpx;
	line-height: 30rpx;
	padding: 0 10rpx;
	border-radius: 100rpx;
	overflow: hidden;
	position: absolute;
	right: 30rpx;
	top: 20rpx;
}
.data-cell-hint-red {
	background: #de4130;
}

.grid view {
	border: 1rpx solid #cccccc;
	border-left: none;
}

.pannel-title {
	font-size: 28rpx;
	font-weight: bold;
}

.orders-cells {
	border-bottom: 1rpx solid #eeeeee;
}
.orders-cells .weui-cell {
	padding: 30rpx;
}

.orders-cell {
	padding: 30rpx 0;
	text-align: center;
	position: relative;
}
.orders-cell-icon {
	width: 70rpx;
	height: 70rpx;
}
.orders-cell-text {
	font-size: 26rpx;
}
.orders-cell-hint {
	font-size: 20rpx;
	color: #ffffff;
	background: #353535;
	height: 30rpx;
	line-height: 30rpx;
	padding: 0 10rpx;
	border-radius: 100rpx;
	overflow: hidden;
	position: absolute;
	right: 30rpx;
	top: 20rpx;
}
.orders-cell-hint-red {
	background: #de4130;
}

.op-cells {
	margin: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
.op-cells::before {
	display: none;
}
.op-cells .weui-cell {
	padding: 40rpx;
}
.op-cells .weui-cell::before {
	left: 40rpx;
}
.op-cells .weui-cell__bd {
	font-size: 28rpx;
}
</style>
